<template>
    <admin-main :breadcrumbs="breadcrumbs">
        <fold-panel title="Insert Product" class="panel-default">
            <div id="demo">
                <div class="step-app">
                    <ul class="step-steps">
                        <li><a href="#step1">Step 1</a></li>
                        <li><a href="#step2">Step 2</a></li>
                        <li><a href="#step3">Step 3</a></li>
                    </ul>
                    <div class="step-content">
                        <div class="step-tab-panel" id="step1">
                            ...
                        </div>
                        <div class="step-tab-panel" id="step2">
                            ...
                        </div>
                        <div class="step-tab-panel" id="step3">
                            ...
                        </div>
                    </div>
                    <div class="step-footer">
                        <button data-direction="prev">Previous</button>
                        <button data-direction="next">Next</button>
                        <button data-direction="finish">Finish</button>
                    </div>
                </div>
            </div>
        </fold-panel>
        <document-title :title="breadcrumbs.title"></document-title>
    </admin-main>
</template>

<script>
    /* eslint-disable no-undef */

    import AdminMain from '../AdminMain.vue';
    import DocumentTitle from '../../layout/Title.vue';
    import FoldPanel from 'vue-fiu-ui/src/main/js/components/panel/FoldPanel.vue';
    import Steps from 'jquery.steps';

    export default {
        components: {
            FoldPanel,
            DocumentTitle,
            AdminMain
        },
        data () {
            return {
                breadcrumbs: {
                    title: '添加商品',
                    data: [
                        {to: {name: 'Home'}, icon: 'fa-home', cut: true, disabled: false, text: 'Home'},
                        {to: {name: 'Home'}, icon: 'fa-shopping-basket', cut: true, disabled: false, text: '商品'},
                        {to: '#', cut: false, disabled: true, text: '添加商品'}
                    ]
                }
            };
        },
        mounted () {
            console.info(Steps, require('jquery.steps/dist/jquery-steps'));
        }
    };
</script>

<style scoped>
    @import "~jquery.steps/dist/jquery-steps.css";
</style>
